<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
       .wrap {
          width: 742px;
          margin: 10px auto;
       }
       .clearfix::after {
           content: "";
           display: block;
           clear: both;
       }
       ul {
           list-style: none;
       }
       li {
        position: relative;
        float: left;
        width: 220px;
        padding: 10px 20px;
        margin-left: 20px;
        margin-top: 20px;
        text-align: center;
        border: 1px solid #eee;
        background: #fff;
       }
       .prod.hover .cover{
            opacity: 1;
        }
       .title {
            margin-left: 20px;
            display: block;
            font-size: 2em;
            font-weight: bold;
            color: #666;
       }
       img {
           height: 100%;
           width: 100%;
       }
       a {
           text-decoration: none;
           font-size: 12px;
       }
       .goods-name {
          text-align: left;
          color: #666;
       }
       .goods-price {
          text-align: left;
          color: #c81623;
          margin-top: 20px;
       }
       .btns {
           margin-left: 20px;
           margin-top: 20px;
       }
       button {
           margin-right: 10px;
           color: #c81623;
           border: 1px solid #c81623;
           background: #fff;
           padding: .8em 1.2em;
           border-radius: 4px;
       }
       .cover {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0,0,0, 0.3);
            transition: all 0.3s;
            opacity: 0;
       }
       .prod.hover .cover {
            opacity: 1;
       }
       .cover > .del {
           border: 1px solid #c81623; 
           color: #c81623;
           background: #fff;
           padding: .8em 1.2em;
           border-radius: 4px;
           line-height: 300px;
        }
    </style>
</head>
<body>
    <div class="wrap">
       <h1 class="title">呵呵呵</h1>
       <ul class="prod-ct clearfix">
           <li class="prod">
                <div class="cover">
                    <a class="del" href="#">删除</a>
                </div>
                <a href="#">   
                   <img src="https://picsum.photos/200/200/?image=1" alt="">
                   <div class="goods-name">和田玉</div>
                   <div class="goods-price">￥1699.00</div>
               </a>
           </li>
           <li  class="prod">
                <div class="cover">
                        <a class="del" href="#">删除</a>
                    </div>
                <a href="#">
                        <img src="https://picsum.photos/200/200/?image=1" alt="">
                        <div class="goods-name">和田玉</div>
                        <div class="goods-price">￥1699.00</div>
                    </a>
           </li>
           <li  class="prod">
                <div class="cover">
                        <a class="del" href="#">删除</a>
                    </div>
                <a href="#">
                        <img src="https://picsum.photos/200/200/?image=1" alt="">
                        <div class="goods-name">和田玉</div>
                        <div class="goods-price">￥1699.00</div>
                    </a>
           </li>
       </ul>
       <div class="btns">
            <button class="add">添加</button>
            <button class="edit">编辑</button>
       </div>
       
    </div>
    <script src="http://js.jirengu.com/js/vendor/jquery-1.11.0.min.js"></script>
    <script>
        $(".add").on("click",function(e){
            e.preventDefault();
            $(".prod").removeClass('hover')
         for(var i = 0;i < 3; i++){
           var  temp = Math.floor(Math.random()*100);
           var n =  '<li  class="prod">'+
                        '<div class="cover">'+
                            '<a class="del" href="#">删除</a>'+
                        '</div>'+
                        '<a href="#">'+
                        '<img src="https://picsum.photos/200/200/?image='+temp+'" alt="">'+
                        '<div class="goods-name">和田玉</div>'+
                        '<div class="goods-price">￥16'+temp+'</div>'+'</a></li>'
            $("ul").append(n);
         }   
            
          
        })
        $(".edit").on("click",function(e){
            e.preventDefault();
            $(".prod").toggleClass('hover')
        })
        $(".prod-ct").on("click",".del",function(e){
            e.preventDefault();
            $(this).parents(".prod").remove();
        })
    </script>
</body>
</html>